import { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { toJS } from "mobx";
import { observer } from "Mobx-react";
import { Button, Select, Input, Empty, Switch, Modal } from "antd";
import { FormOutlined, ProfileOutlined, FundOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
import shortId from "shortid";
import { getTime } from "@/utils/index";
import { surveyStore } from "@/stores/survey";
import type { surveyType } from "@/types/index";
import { getAnswerNum, answerErasure } from "@/computed/answer";
import { ProjectContent } from "./stye";

const { Search } = Input;
function Project() {
  const navigate = useNavigate();
  const [stateValue, setState] = useState(0);
  console.log("surveyStore.surveyData", surveyStore.surveyData);
  const [surveyList, setSurey] = useState<surveyType[]>(surveyStore.surveyData);

  //编辑问卷
  const pushInvestigation = (id: string) => {
    navigate(`/investigation`);
    surveyStore.modifySurveyId(id);
  };
  const dataAnalysis = (id: string) => {
    navigate("/data/analysis");
    surveyStore.modifySurveyId(id);
  };

  //切换状态
  const stateChange = (id: string, state: boolean) => {
    surveyStore.stateModify(id, state);
  };
  //复制
  const copyClick = (item: surveyType) => {
    const survey = toJS(item);
    survey.id = shortId.generate();
    survey.title = survey.title + "【复制】";
    survey.createTime = getTime();
    survey.modifyTime = "";
    survey.state = false;
    surveyStore.surveyAdd(survey);
  };
  //删除
  const erasure = (id: string) => {
    Modal.confirm({
      title: "提示",
      content: `删除该调查？`,
      okText: "确认",
      cancelText: "取消",
      onOk() {
        setSurey(surveyList.filter(item => item.id !== id));
        surveyStore.surveyErasure(id);
        answerErasure(id);
      }
    });
  };

  return (
    <ProjectContent className="flex-between">
      <Button type="primary" size="large" style={{ width: 200 }} onClick={() => pushInvestigation("")}>
        + 新建
      </Button>
      <div className="project-box">
        <div className="content-header flex-between align-items">
          <span>我的项目</span>
          <div className="project-screen">
            <Select
              defaultValue={stateValue}
              style={{ width: 120 }}
              onChange={(value: number) => setState(value)}
              options={[
                { value: 0, label: "状态" },
                { value: 1, label: "已发布" },
                { value: 2, label: "未发布" }
              ]}
            />
            <Search placeholder="请输入问卷名称进行搜索" style={{ width: 240 }}></Search>
          </div>
        </div>
        <div className="project-list">
          {surveyList.map(item => {
            return (
              <div className="project-item" key={item.id}>
                <div className="project-item-info flex-between align-items">
                  <div className="project-info-Left">{item.title}</div>
                  <div className="project-info-right">
                    <span>ID：{item.id}</span>
                    <span>状态：{item.state ? "已发布" : "未发布"}</span>
                    <span>答题数：{getAnswerNum(item.id)}</span>
                    <span>创建时间：{item.createTime}</span>
                  </div>
                </div>
                <div className="project-item-operate flex-between align-items">
                  <div className="project-operate">
                    <span onClick={() => pushInvestigation(item.id)}>
                      <FormOutlined />
                      编辑问卷
                    </span>
                    <Link target="_blank" to={`/question?id=${item.id}`}>
                      <ProfileOutlined />
                      回答问卷
                    </Link>
                    <span onClick={() => dataAnalysis(item.id)}>
                      <FundOutlined />
                      数据分析
                    </span>
                  </div>
                  <div className="project-operate">
                    <span>
                      <Switch checkedChildren="发布" unCheckedChildren="停止" value={item.state} onChange={() => stateChange(item.id, !item.state)} />
                    </span>
                    <span onClick={() => copyClick(item)}>
                      <CopyOutlined />
                      复制
                    </span>
                    <span onClick={() => erasure(item.id)}>
                      <DeleteOutlined />
                      删除
                    </span>
                  </div>
                </div>
              </div>
            );
          })}
          {surveyList.length === 0 && <Empty></Empty>}
        </div>
      </div>
    </ProjectContent>
  );
}
export default observer(Project);
